<template>
    <div class = "practice">
         <el-container v-loading = "loading"> 
        <el-container>
        <el-main>
            <el-card class="box-card">
                  <div class="block">
                    <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button style="margin-left:20px;" @click.native = "Time" >搜索</el-button>
                </div>
                <el-col :span="8" v-for="(item,index) in tabData" :key="index" class = "box-col">
                <el-card shadow="hover">
                    <div class = "box-name">
                        <span class = "spanName">姓名 : {{item.leaderName}}</span>
                        <span class = "spanPhone" v-if = "item.phone">联系电话 : {{item.phone}}</span>
                    </div>
                    <div class = "box-basename">
                        <p>实践基地 : {{item.baseName}}</p>
                    </div>
                    <div class = "boxtime-wrapper">
                        <p>预约开始时间 : {{item.startTime}}</p>
                        <p>预约结束时间 : {{item.endTime}}</p>
                        <p>签到时间 : {{item.signInTime}}</p>
                        <p>签退时间 : {{item.signOutTime}}</p>
                    </div>
                    <div class = "box-make">
                        <p>实践人数 : {{item.count}}</p>
                        <el-button @click = "Seetheevaluation(item,index)" style="float:right">查看</el-button>
                    </div>
                </el-card>
                </el-col>
                <div style="text-align: center;" v-if = "tabData.length == 0" class = "notavailable">暂无数据</div>
                </el-card>
                <el-dialog title="评价列表" :visible.sync="dialogTableVisible" >
                       <el-radio-group v-model="radio1" @change="qwe" style="padding-bottom:10px;">
                         <el-radio-button label="未评价"></el-radio-button>
                         <el-radio-button label="未展示"></el-radio-button>
                         <el-radio-button label="已展示"></el-radio-button>
                </el-radio-group>
                    <div class = "List-wrapper" v-for = "item in currentViewComments" :key="item.id">
                        <div class = "dialoa-name">
                            <span class = "spanone">姓名 : {{item.studentName}}</span>
                            <span class = "spanTime">{{item.commentTime}}</span>
                            <span class = "spantwo">所在学校 : {{item.schoolName}}</span>
                            <p class = "spantherr">班级 : {{item.className}}</p>
                        </div>
                        <div class = "Getscore" style="margin-top:15px;display: flex;" v-if = "item.status !== 'not_evaluated'">
                        <span style="line-height:20px;margin-right:15px;">环境评分 :</span>
                        <el-rate
                        v-model="item.environmentScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        >
                        </el-rate>
                        </div>
                        <div class = "Getscore" style="margin-top:5px;display: flex;" v-if = "item.status !== 'not_evaluated'">
                        <span style="line-height:20px;margin-right:15px;">体验评分 :</span>
                        <el-rate
                        v-model="item.experienceScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        >
                        </el-rate>
                        </div>
                        <div class = "Getscore" style="margin-top:5px;display: flex;" v-if = "item.status !== 'not_evaluated'">
                        <span style="line-height:20px;margin-right:15px;">服务评分 :</span>
                        <el-rate
                        v-model="item.serviceScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        >
                        </el-rate>
                        </div>
                        <div v-if="item.status !== 'not_evaluated'">
                            <p style="padding:10px 0;" v-if = "item.imgs">实践图片 :</p>
                            <div class = "img-wrapper" id="Imm" v-if = "item.imgs">
                                <div  class="images" v-viewer >
                                    <img :src="itemone" v-for="(itemone, indexone) in item.imgs" :key="indexone">
                                </div>
                            </div>
                        </div>
                        <!-- <div v-if = "item.status == 'not_evaluated'" class="block" style="display:flex;padding-top:20px;">
                        <span class="demonstration" style="margin-right:20px;line-height:20px;">评分</span>
                        <el-rate v-model="gridData[index].value1" ></el-rate>
                        </div> -->
                        <div v-if = "item.status !== 'not_evaluated'" style="padding:20px 0;" class = "dialoa-content">
                            <p>实践内容 : {{item.content}}</p>
                        </div>
                        <!-- <div  v-if = "item.status == 'not_evaluated'" class = "dialoa-evaluate" style="display:flex;margin-top:20px;">
                            <span style="width:40px;">评价</span>
                            <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                            v-model="gridData[index].textarea">
                            </el-input>
                        </div> -->
                        <div v-if = "item.status !== 'not_evaluated'" class = "but" style="text-align: right;padding-right: 20px;">
                        <el-button   type="primary" @click = "submitevaluate(item)">{{title}}</el-button>
                        </div>
                    </div>
                    <div style="text-align: center;padding: 30px;" v-if = "currentViewComments.length == 0" class = "title">
                    <p>暂无数据</p>
                    </div>
                </el-dialog>
                <el-pagination
            style="float:right;padding:15px 0;"
            background
             @current-change="handleCurrentChange" 
            layout="prev, pager, next"
            :total="totalCount">
          </el-pagination>
        </el-main>
        </el-container>
        </el-container>
    </div>
</template>
<script>
import Vue from 'vue'
import transitionTime from "../../transitionTime.js"
export default {
    data(){
        return{
             // // 默认显示第几页
            currentPage:1,
            // // 总条数，根据接口获取数据长度(注意：这里不能为空)
            totalCount:10,
            radio1: '未评价',
            gridData:[],
            tabData:[],
            loading:false,
            value1:[],
            dialogTableVisible:false,
            user:{},
            item:{},
            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            currentComments:[],
            currentViewComments:[],
            title:''
        }
    },
    mounted() {
        this.data()
    },
    methods:{
        data(){
        this.loading = true
        this.user = JSON.parse(sessionStorage.getItem('user'))
        var nowdate = new Date()
        var date = new Date(nowdate.getTime() - 30 * 24 * 3600 * 1000)
        this.value1.push(date)
        this.value1.push(nowdate)
        this.Time()
        },
        addZero(num) {
        return num < 10 ? '0'+num : num;
        },
        //提交
        submitevaluate(item){
            let status
            if(this.radio1 === '已展示'){
                status = 'dismissed'
            } else if(this.radio1 === '未展示') {
                status = 'passed'
            }
            let Add = {
                "status" : status,
            }
            this.$api.Basemanager.audit(item.id,Add).then(res => {
                if(res.code === 200){
                    this.currentViewComments = this.currentComments.filter(data => data.studentName !== item.studentName)
                    this.open1('成功','添加成功','success')
                } else {
                    this.open1('失败','添加失败','warning')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        Time(){
            this.loading = true
            this.currentPage = 1
            this.totalCount = 10
            let Time = []
            let base = JSON.parse(sessionStorage.getItem('user'))
            for(let i = 0; i < this.value1.length; i++) {
                Time.push(this.value1[i].toJSON())
            }
            if(Time.length ===  0){
                this.open1('失败','请选择日期','warning')
            } else {
              this.$api.Basemanager.evaluateAXIOS(Time[0],Time[1],base.baseId,this.currentPage,10).then(res => {
                this.tabData = res.data.rows
                if(res.data.pageCount){
                    this.totalCount = res.data.pageCount * 10
                } else {
                    this.totalCount = 10
                }
                this.transitionTime()
            }).catch(err => {
                console.log(err)
            })
            this.loading = false
            }
        },
        //时间转换
        transitionTime(){
            for(let i = 0; i<this.tabData.length; i++){
                this.tabData[i].startTime = transitionTime(this.tabData[i].startTime)
                this.tabData[i].endTime = transitionTime(this.tabData[i].endTime)
                this.tabData[i].signInTime = transitionTime(this.tabData[i].signInTime)
                this.tabData[i].signOutTime = transitionTime(this.tabData[i].signOutTime)
            }
        },
        //切换角色
        qwe(){
            let status = 'passed';
           if (this.radio1 === '未评价') {
                status = 'not_evaluated';
                this.currentViewComments = this.currentComments.filter(item => item.status == status);
            } else if (this.radio1 === '已展示') {
                status = 'passed'
                this.title = '隐藏'
                this.Switchstate(status)
            } else {
                status = 'dismissed'
                this.title = '通过'
                this.title = '展示'
                this.$api.Basemanager.Evaluationapproved(this.item.reservationId).then(res => {
                this.currentComments = res.data;
                this.Modifythescore()
                this.currentViewComments = this.currentComments.filter(item => {
                    if(item.status == 'pending_review' || item.status == 'dismissed'){
                        return item.status
                    }
                });
            });
                
            }
        },
        // 切换状态
        Switchstate(status){
             this.$api.Basemanager.Evaluationapproved(this.item.reservationId).then(res => {
                this.currentComments = res.data;
                this.Modifythescore()
                this.currentViewComments = this.currentComments.filter(item => item.status == status);
            });
        },
        //获取数据
        status(){
            this.$api.Basemanager.Evaluationapproved(this.item.reservationId).then(res => {
                this.currentComments = res.data;
                this.Modifythescore()
                this.qwe();
                this.dialogTableVisible = true;
            });
        },
        // 修改评分
        Modifythescore(){
            for(let i = 0; i < this.currentComments.length; i++){
                this.currentComments[i].environmentScore = this.currentComments[i].environmentScore / 2
                this.currentComments[i].experienceScore = this.currentComments[i].experienceScore / 2
                this.currentComments[i].serviceScore = this.currentComments[i].serviceScore / 2
                    if(this.currentComments[i].commentTime){
                        this.currentComments[i].commentTime = transitionTime(this.currentComments[i].commentTime)   
                    }
             }
        },
        handleCurrentChange(val) {
            this.loading = true
            this.currentPage=val
            let Time = []
            let base = JSON.parse(sessionStorage.getItem('user'))
            for(let i = 0; i < this.value1.length; i++) {
                Time.push(this.value1[i].toJSON())
            }
            if(Time.length ===  0){
                this.open1('失败','请选择日期','warning')
            } else {
              this.$api.Basemanager.evaluateAXIOS(Time[0],Time[1],base.baseId,this.currentPage,10).then(res => {
                this.tabData = res.data.rows
                this.transitionTime()
                this.loading = false
            }).catch(err => {
                console.log(err)
            })
        }
       },
        //查看评价
        Seetheevaluation(item,index){
            this.item = item
            this.radio1 = '未评价'
            this.status()
        },
        open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
    }
}
</script>
<style scoped>
    .practice{
        width:100%;
    }
    .box-card{
        width:100%;
        padding-bottom: 20px;
    }
    .practice .box-card .block{
        width:100%;
        float: left;
        padding-bottom: 20px;
    }
    .practice .box-card .box-basename{
        padding-top:20px;
        height:20px;
    }
    .practice .box-card .box-basename p{
        float: left;
        line-height: 20px;
    }
    .practice .box-card .box-name {
        height:20px;
    }
    .practice .box-card .box-name p{
        float:left;
        font-weight: bold;
        font-size:22px;
        line-height:20px;
    }
    .evaluate .box-card .box-name {
        height:20px;
    }
    .practice .box-card .box-name .spanName{
        float:left;
        font-weight: bold;
        font-size:22px;
        line-height:20px;
    }
    .practice .box-card .box-name .spanPhone{
        float: left;
        font-size: 18px;
        margin-left: 50px;
    }
    .practice .box-card .boxtime-wrapper p{
        margin-top:15px;
    }
    .practice .box-card .box-make{
        height:45px;
    }
    .practice .box-card .box-make p{
        float: left;
        line-height: 45px;
    }
    .box-col{
        width:100%;
    }
    .practice .List-wrapper{
        width:100%;
        border:1px solid #EBEEF5;
        padding:15px 0px 15px 10px;
        transition: 0.2s
    }
    .practice .List-wrapper:hover{
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .practice .List-wrapper .dialoa-name .spanone{
        font-weight: bold;
        font-size:20px;
    }
    .practice .List-wrapper .dialoa-name .spantwo{
        margin-left:40px;
        font-size:16px;
    }
    .practice .List-wrapper .dialoa-name .spantherr{
        font-size:16px;
        margin-top:15px;
    }
    .practice .List-wrapper .dialoa-name .spanTime{
        float:right;
        margin-right: 15px;
        line-height: 25px
    }
    .practice .img-wrapper{
        width:100%;
        height: 150px;
        overflow: auto
    }
    .practice .img-wrapper .images{
        width:250px;
        height: 130px;
        display: flex;
    }
    .practice .img-wrapper .images img{
        width:100%;
        height:100%;
        padding-right:10px;
        cursor:pointer
    }
</style>
